<template>
  <div class="infoSet">
    <form class="infoForm" style="margin-left: 230px">
      <table ng="0" cellpadding="10">
        <br>
        <tr>
          <th>请输入原密码：</th>
          <td>
            <div class="input">
              <el-input placeholder="请输入原密码" v-model="password0" show-password @blur="pwd0(password0)"></el-input>
            </div>
            <div class="label">
              <label v-show="check0" class="labelTrue">原密码校核通过</label>
              <label class="labelFalse" v-show="label0">{{label0}}</label>
            </div>
          </td>
        </tr>
        <tr>
          <th>请输入新密码：</th>
          <td>
            <div class="input">
              <el-input placeholder="请输入新密码" v-model="password1" show-password @blur="pwd1(password1)"></el-input>
            </div>
            <div class="label">
              <label v-show="check1" class="labelTrue">新密码输入成功</label>
              <label class="labelFalse" v-show="label1">{{label1}}</label>
            </div>
          </td>
        </tr>
        <tr>
          <th>请确认新密码：</th>
          <td>
            <div class="input">
              <el-input placeholder="请确认新密码" v-model="password2" show-password @blur="pwd2(password2)"></el-input>
            </div>
            <div class="label">
              <label v-show="check2" class="labelTrue">新密码校核通过</label>
              <label class="labelFalse" v-show="label2">{{label2}}</label>
            </div>
          </td>
        </tr>
        <tr>
          <th>手机号：</th>
          <td>
            <div class="input">
              <el-input placeholder="请输入手机号" v-model="user.phone" @blur="phoneCheck(user.phone)"></el-input>
            </div>
            <div class="label">
              <label v-show="check3" class="labelTrue">手机号输入成功</label>
              <label class="labelFalse" v-show="label3">{{label3}}</label>
            </div>
          </td>
        </tr>
        <tr>
          <th>邮箱：</th>
          <td>
            <div class="input">
              <el-input placeholder="请输入邮箱" v-model="user.email" @blur="emailCheck(user.email)"></el-input>
            </div>
            <div class="label">
              <label v-show="check4" class="labelTrue">邮箱输入成功</label>
              <label class="labelFalse" v-show="label4">{{label4}}</label>
            </div>
          </td>
        </tr>

      </table>
    </form>
    <div class="setButton">
      <el-button type="warning" @click="updateUser()">保存修改</el-button><br>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{},
      password0:'',
      password1:'',
      password2:'',
      label0:'',
      label1:'',
      label2:'',
      label3:'',
      label4:'',
      check0:false,
      check1:false,
      check2:false,
      check3:false,
      check4:false,
    }
  },
  created() {
    this.user = this.$store.state.grades;
    console.log(this.user);
  },
  methods:{
    pwd0(password0){
      if(password0 === this.user.pwd){
        this.check0 = true;
        this.label0 = "";
      }else {
        this.label0 = "输入密码错误，请重新输入！";
      }
    },
    pwd1(password1){
      let regexp1 = /^[a-zA-Z0-9]{6,18}$/;
      if(regexp1.test(password1)){
        this.check1 = true;
        this.label1 = "";
      }else {
        this.label1 = "密码格式错误，请重新输入！";
      }
    },
    pwd2(password2){
      let regexp1 = /^[a-zA-Z0-9]{6,18}$/;
      if(regexp1.test(password2)){
        if(this.password1 === password2){
          this.check2 = true;
          this.label2 = "";
        }else {
          this.label2 = "两次输入密码不一致，请重新输入！";
        }
      }else {
        this.label2 = "密码格式错误，请重新输入！";
      }

    },
    phoneCheck(phone){
      let regexp2 = /^1[34578]\d{9}$/;
      if(regexp2.test(phone)){
        this.check3 = true;
        this.label3 = "";
      }else {
        this.label3 = "手机号格式错误，请重新输入！";
      }
    },
    emailCheck(email){
      let regexp3 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if(regexp3.test(email)){
        this.check4 = true;
        this.label4 = "";
      }else {
        this.label4 = "邮箱格式错误，请重新输入！";
      }
    },
    updateUser:function () {
      if(this.check0 && this.check1 && this.check2 && this.check3 && this.check4){
        this.user.pwd = this.password2;
        this.axios.put(this.baseUrl+"user/updateuser",this.user)
          .then(res =>{
            console.log(res.data);
            alert(res.data.data);
          })
      }
    },
  }
}
</script>

<style scoped>
@import "../../assets/css/student.css";
.labelTrue{
  font-size: 10px;
  color: green;
}
.labelFalse{
  font-size: 10px;
  color: red;
}
td{
  height: 35px;
}
.input{
  height: 25px;
}
.label{
  margin-top: 10px;
  height: 10px;
}
</style>
